<!--
 * @Author: zhangweinan
 * @Date: 2022-12-13 15:38:44
 * @LastEditors: zhangweinan
 * @LastEditTime: 2023-01-06 14:09:25
 * @Description: file content
 * @FilePath: \front-end-of-task-center\src\views\roles\invitation\add.vue
-->
<template>
  <div class="app-container">
    <el-collapse accordion v-model="activeName">
      <el-collapse-item name="1">
        <template slot="title">
          <i
            :class="
              activeName == 1 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
            "
          ></i
          >邀约通知
        </template>
        <el-row :gutter="15">
          <el-form
            ref="noticForm"
            :model="formData"
            :rules="rules"
            size="medium"
          >
            <el-col :span="16">
              <el-row>
                <el-col :span="24">
                  <el-form-item label-width="80px" label="主题" prop="subject">
                    <el-input
                      v-model="formData.subject"
                      placeholder="请输入主题"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="80px"
                    label="时间"
                    prop="startTime"
                  >
                    <el-date-picker
                      v-model="formData.startTime"
                      type="datetime"
                      value-format="yyyy-MM-dd HH:mm:ss"
                      placeholder="选择日期时间"
                      :style="{ width: '100%' }"
                      clearable
                    >
                    </el-date-picker>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="80px" label="地点" prop="address">
                    <el-input
                      v-model="formData.address"
                      placeholder="请输入地点"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="80px"
                    label="联系人"
                    prop="contacts"
                  >
                    <el-input
                      v-model="formData.contacts"
                      placeholder="请输入联系人"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="80px"
                    label="联系方式"
                    prop="contactsPhone"
                  >
                    <el-input
                      v-model="formData.contactsPhone"
                      placeholder="请输入联系方式"
                      clearable
                      :style="{ width: '100%' }"
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item label-width="80px" label="方式" prop="field119">
                    <el-checkbox-group
                      v-model="formData.field119"
                      size="medium"
                    >
                      <el-checkbox
                        v-for="(item, index) in field119Options"
                        :key="index"
                        :label="item.value"
                        :disabled="item.disabled"
                        >{{ item.label }}</el-checkbox
                      >
                    </el-checkbox-group>
                  </el-form-item>
                </el-col>
                <el-col :span="12">
                  <el-form-item
                    label-width="140px"
                    label="有效时长（分钟）"
                    prop="expirationTime"
                  >
                    <el-input-number
                      v-model="formData.expirationTime"
                      controls-position="right"
                      placeholder="请输入有效时长（分钟）"
                      :min="10"
                      clearable
                      :style="{ width: '100%' }"
                    ></el-input-number>
                  </el-form-item>
                </el-col>
                <el-col :span="24">
                  <el-form-item label="短信模板" label-width="80px">
                    <el-input
                      type="textarea"
                      :rows="3"
                      placeholder="请输入内容"
                      v-model="noticContent"
                      disabled
                    >
                    </el-input>
                  </el-form-item>
                </el-col>
              </el-row>
            </el-col>
          </el-form>
        </el-row>
        <!-- <div v-html="noticContent"></div> -->
      </el-collapse-item>
      <el-collapse-item name="2">
        <template slot="title">
          <i
            :class="
              activeName == 2 ? 'el-icon-caret-bottom' : 'el-icon-caret-right'
            "
          ></i
          ><span>邀约专家</span>
        </template>
        <!-- 搜索条件 -->
        <div class="second_top_class">
          <div>
            <span>侯邀专家：{{ total }}名</span>
            <span>计划邀约：{{ planeNumber }}名</span>
          </div>
          <div>
            <span @click="selectpExert" class="close_btn addInvitationStyle"
              >选择专家</span
            >
          </div>
        </div>
        <el-table :data="tableData_template" border style="width: 100%">
          <el-table-column label="序号" align="center"
            ><template slot-scope="scope">
              {{ Number(scope.$index + 1) }}
            </template>
          </el-table-column>
          <el-table-column prop="name" label="姓名" align="center">
          </el-table-column>
          <el-table-column prop="unitName" label="工作单位" align="center">
          </el-table-column>
          <el-table-column prop="areaExpertise" label="擅长领域" align="center">
          </el-table-column>
          <el-table-column prop="jobTitle" label="职称" align="center">
          </el-table-column>
          <el-table-column prop="phone" label="手机号" align="center">
          </el-table-column>
          <el-table-column label="操作" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="small"
                style="color: red"
                @click="deleteOperateRow(scope.row)"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- 分页组件 -->
        <el-pagination
          class="hy_page"
          v-show="total > 0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="queryParams.pageNo"
          :page-size="queryParams.pageSize"
          layout="total, prev, pager, next, jumper"
          :total="total"
        >
        </el-pagination>
      </el-collapse-item>
    </el-collapse>
    <div class="btn_calss">
      <span @click="submitSelect" class="close_btn addInvitationStyle"
        >完成</span
      >
      <span @click="cancelSelect" class="close_btn" style="margin-left: 16px"
        >取消</span
      >
    </div>
    <!-- 专家遴选弹出框 -->
    <el-dialog
      title="专家遴选完成"
      :visible.sync="dialogVisible"
      width="30%"
      @close="closeDialog"
    >
      <p class="linxuan_p">
        <!-- <span class="ok_style">专家遴选完成</span> -->
        <span
          >接下去，您可以立即开启专家邀约或稍后开启！<span
            class="start_style"
            @click="startOperate"
            >去开启</span
          ></span
        >
      </p>
    </el-dialog>
    <!-- 选择专家遴选弹出框 -->
    <selectExpert ref="tabsDialog" @getResultTableData="getResultTableData" />
  </div>
</template>
<script>
import selectExpert from "./selectDialog/select.vue";
import {
  deleteExpert,
  saveExpertsSelect,
} from "@/api/enterprise/invitation.js";
export default {
  name: "invitationAdd",
  components: {
    selectExpert,
  },
  data() {
    return {
      planeNumber: 0, //计划邀约多少人
      noticContent:
        "【浙江省经济和信息化厅专家库】尊敬的 [姓名] 专家，您好。我们诚挚的邀请您参加 [主题]。会议时间：[时间]；地点：[地点]。如参加请点击链接（https://xxx.zj.gov.cn/）确认，有效时长[10分钟]。如有疑问请联系[联系人]，联系方式 [联系方式]。",

      // noticContent:
      //   '<div id="u137_text" class="text "><p><span>【浙江省经济和信息化厅专家库】尊敬的 [姓名] 专家，您好。我们诚挚的邀请您参加 [主题]。会议时间：[时间]；地点：[地点]。如参加请点击链接（https://xxx.zj.gov.cn/）确认，有效时长[10分钟]。如有疑问请联系[联系人]，联系方式 [联系方式]。</span></p></div>',
      activeName: "1",
      formData: {
        subject: "", //主题
        startTime: "", //时间
        address: "",
        contacts: "",
        contactsPhone: "",
        field119: [1],
        expirationTime: "",
      },
      rules: {
        subject: [
          {
            required: true,
            message: "请输入主题",
            trigger: "blur",
          },
        ],
        startTime: [
          {
            required: true,
            message: "请至少选择一个时间",
            trigger: "change",
          },
        ],
        address: [
          {
            required: true,
            message: "请输入地点",
            trigger: "blur",
          },
        ],
        contacts: [
          {
            required: true,
            message: "请输入联系人",
            trigger: "blur",
          },
        ],
        contactsPhone: [
          { required: true, trigger: "blur", message: "手机号不能为空" },
          {
            validator: function (rule, value, callback) {
              if (
                /^(?:(?:\+|00)86)?1(?:3[\d]|4[5-79]|5[0-35-9]|6[5-7]|7[0-8]|8[\d]|9[189])\d{8}$/.test(
                  value
                ) === false
              ) {
                callback(new Error("手机号格式错误"));
              } else {
                callback();
              }
            },
            trigger: "blur",
          },
        ],
        field119: [
          {
            required: true,
            type: "array",
            message: "请至少选择一个方式",
            trigger: "change",
          },
        ],
        expirationTime: [
          {
            required: true,
            message: "请输入有效时长（分钟）",
            trigger: "blur",
          },
        ],
      },
      field119Options: [
        {
          label: "短信",
          value: 1,
        },
      ],
      tableData: [],
      tableData_template: [],
      total: 0,
      queryParams: {
        pageNo: 1,
        pageSize: 5,
      },
      dialogVisible: false,
      dialogFormVisible: false,
    };
  },
  watch: {
    tableData: {
      handler(newVal) {
        if (newVal.length == 0) {
          localStorage.setItem("loadKey", "");
        }
      },
      immediate: true,
    },
  },
  created() {
    //前端分页
    this.getList();
  },

  methods: {
    //删除筛选出来的专家
    async deleteOperateRow(param) {
      let loadKey = localStorage.getItem("loadKey");
      let params = {
        loadKey,
        expertId: param.expertId,
      };
      //根据expertId进行后端删除-真正的从数据库中删除
      await deleteExpert(params).then(() => {
        this.$message.success("取消成功！");
      });
      //根据expertId进行删除-前端自行删除-假删除
      this.tableData = this.tableData.filter(
        (item) => item.expertId != param.expertId
      );
      this.total = this.tableData.length;
      this.queryParams.pageNo = 1;
      this.getList();
    },

    handleSizeChange(val) {
      this.queryParams.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.queryParams.pageNo = val;
      this.getList();
    },
    getList() {
      this.pagination(this.queryParams.pageNo, this.queryParams.pageSize);
    },
    //前端分页函数
    pagination(pageNo, pagesize) {
      let num1 = (pageNo - 1) * pagesize; //确定循环开始的集合下标
      let num2 = pageNo * pagesize; //确定循环结束的结束下标
      this.tableData_template = this.tableData.slice(num1, num2);
    },
    //屏蔽条件
    addShield() {
      this.dialogFormVisible = true;
    },
    //选择专家遴选条件
    selectpExert() {
      this.$refs.tabsDialog.show();
    },
    getResultTableData(data) {
      let { resultTableData, inviteesNumbers, total } = data;
      this.tableData = resultTableData;
      this.planeNumber = inviteesNumbers;
      this.total = total;
      this.getList();
    },
    //完成遴选
    submitSelect() {
      this.$refs["noticForm"].validate((valid) => {
        if (!valid) {
          this.$message.info("邀约通知相关信息未填写完整");
          return;
        }
        if (localStorage.getItem("loadKey") == "") {
          this.$message.info("邀约专家未选择");
          return;
        }
        let params = {
          address: this.formData.address,
          contacts: this.formData.contacts,
          contactsPhone: this.formData.contactsPhone,
          endTime: "",
          expirationTime: this.formData.expirationTime,
          id: 0,
          invitationType: 0,
          loadKey: localStorage.getItem("loadKey"),
          startTime: this.formData.startTime,
          subject: this.formData.subject,
        };
        saveExpertsSelect(params).then((res) => {
          this.dialogVisible = true;
        });
      });
    },
    cancelSelect() {
      this.$router.push("/roles/invitation");
    },
    startOperate() {
      this.closeDialog();
    },
    //关闭遴选完成弹出框
    closeDialog() {
      this.dialogVisible = false;
      this.$router.push("/roles/invitation");
    },
  },
};
</script>
<style lang="scss" scoped>
.second_top_class {
  height: 50px;
  position: relative;
  div {
    &:nth-child(1) {
      position: absolute;
      bottom: 2px;
      span {
        font-size: 14px;
        text-align: left;
        font-family: "Arial Negreta", "Arial Normal", "Arial";
        font-weight: 700;
        font-style: normal;
        margin-right: 10px;
      }
    }
    &:nth-child(2) {
      position: absolute;
      right: 0;
      cursor: pointer;
    }
  }
}
.btn_calss {
  text-align: start;
  margin-top: 20px;
}
.linxuan_p {
  display: flex;
  flex-direction: column;
  margin-bottom: 60px;
  span {
    font-family: "Arial Negreta", "Arial Normal", "Arial";
    font-weight: 700;
    font-style: normal;
    font-size: 14px;
  }
  .ok_style {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .start_style {
    color: #409eff;
    cursor: pointer;
  }
}
::v-deep .el-dialog__body {
  padding: 5px 30px !important;
}
.hy_page {
  float: right;
  margin-top: 20px;
}
.addInvitationStyle {
  color: #ffffff;
  background: #4877ee;
}
</style>
<style>
.close_btn {
  display: inline-block;
  cursor: pointer;
  width: 82px;
  height: 32px;
  line-height: 32px;
  text-align: center;
  border-radius: 3px;
  font-size: 14px;
  font-family: SourceHanSansCN-Medium, SourceHanSansCN;
  font-weight: 500;
  color: #4877ee;
  border: 1px solid #4877ee;
}
</style>
